<template>
	<view class="container">
		<u-navbar :is-back="true" title="编辑" back-icon-color='#333333' height="" :border-bottom="false" height="50">
			<view class=""
				style=" display: flex;align-content: center; color:#2f96fe; font-size: 30rpx; margin-left:550rpx;"  @click="$toLink('../index/index',{},3)">
				{{complete}}
			</view>
		</u-navbar>
		<view class="" style="width:100%; height:20rpx; background:#F2F2F2;">
		</view>
		<view class="layout">
			<view class="list">
				<view class="icon" v-for="(item,index) in dataList" :key="index">
					<view class="">
						<image :src="item.icon" mode="widthFix" :class="[show==true? 'con':'']"
							@click="delete_icon(index)">
						</image>
						<image :src="item.url" mode="widthFix"></image>
					</view>
					<text>{{item.text}}</text>
				</view>
				<view class="add">
					<view class="pic">
						<image src="../../static/tupian107.png" mode="widthFix" @click="change"></image>
					</view>
					<text>添加</text>
				</view>
			</view>
			<view class=""
				style="width:710rpx; margin-left:20rpx; height:20rpx; background:#F7F7F7; border-bottom-left-radius:12rpx;border-bottom-right-radius:12rpx;">

			</view>
			<view class="full_service">
				<text class="left_line"></text>
				<text class="middle_content">全部服务</text>
				<text class="right_line"></text>
			</view>
			<view class="select_icon">
				<view class="replace_icon" v-for="(i,j) in list" :key="j">
					<view class="">
						<image :src="i.icon" mode="widthFix" :class="[show==true? 'con':'']" @click="delete_icon(j)">
						</image>
						<image :src="i.url" mode="widthFix" :style="{width:$width(i.text)}"></image>
					</view>
					<text>{{i.text}}</text>
				</view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				complete: '完成',
				show: false,
				dataList: [{
						url: '../../static/tupian71.png',
						icon: '../../static/tupian149.png',
						text: '邮件管理'
					},
					{
						url: '../../static/tupian57.png',
						icon: '../../static/tupian149.png',
						text: '文件管理'
					},
					{
						url: '../../static/tupian69.png',
						icon: '../../static/tupian149.png',
						text: '校园相册'
					},
					{
						url: '../../static/tupian67.png',
						icon: '../../static/tupian149.png',
						text: '校内会议'
					}
				],
				list: [{
						url: '../../static/tupian71.png',
						icon: '../../static/tupian86.png',
						text: '邮件管理'
					},
					{
						url: '../../static/tupian57.png',
						icon: '../../static/tupian86.png',
						text: '文件管理'
					},
					{
						url: '../../static/tupian69.png',
						icon: '../../static/tupian86.png',
						text: '校园相册'
					},
					{
						url: '../../static/tupian67.png',
						icon: '../../static/tupian86.png',
						text: '校内会议'
					},
					{
						url: '../../static/tupian35.png',
						icon: '../../static/tupian86.png',
						text: '教师用车'
					},
					{
						url: '../../static/tupian13.png',
						icon: '../../static/tupian86.png',
						text: '报修管理'
					},
					{
						url: '../../static/tupian39.png',
						icon: '../../static/tupian86.png',
						text: '流程审批'
					},
					{
						url: '../../static/tupian29.png',
						icon: '../../static/tupian86.png',
						text: '功能室'
					},
					{
						url: '../../static/tupian59.png',
						icon: '../../static/tupian86.png',
						text: '我的班级'
					},
					{
						url: '../../static/tupian64.png',
						icon: '../../static/tupian86.png',
						text: '我的课组'
					},
					{
						url: '../../static/tupian65.png',
						icon: '../../static/tupian86.png',
						text: '物品管理'
					},
					{
						url: '../../static/tupian53.png',
						icon: '../../static/tupian86.png',
						text: '通讯录'
					},
					{
						url: '../../static/tupian49.png',
						icon: '../../static/tupian86.png',
						text: '社团报名'
					},
					{
						url: '../../static/tupian55.png',
						icon: '../../static/tupian86.png',
						text: '学校通知'
					},
					{
						url: '../../static/tupian41.png',
						icon: '../../static/tupian86.png',
						text: '学生请假'
					},
					{
						url: '../../static/tupian37.png',
						icon: '../../static/tupian86.png',
						text: '课程申报'
					},
				]
			}
		},
		methods: {
			change() {
				console.log('触发了吗')
				this.show = !this.show;
				console.log(this.show);

			},
			delete_icon(param) {
				if (this.show) {
					this.dataList.splice(param, 1);
				}
			}
		}
	}
</script>

<style lang="scss">
	.container {
		width: 100%;
		height: 100vh;
		background: #fff;

		.layout {
			width: 100%;
			background: #fff;
			overflow: hidden;

			.list {
				width: 710rpx;
				margin-top: 30rpx;
				border-top-left-radius: 12rpx;
				border-top-right-radius: 12rpx;
				background: #F7F7F7;
				margin-left: 20rpx;
				display: flex;
				justify-content: flex-start;
				flex-wrap: wrap;

				.icon {
					width: 110rpx;
					height: 120rpx;
					margin-left: 20rpx;
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					align-items: center;

					view {
						&:nth-child(1) {
							margin-top: 10rpx;
							width: 100%;
							height: 70rpx;
							position: relative;

							image {
								&:nth-child(1) {
									position: absolute;
									width: 0rpx;
									top: 5rpx;
									right: 20rpx;
									z-index: 100;
								}

								&:nth-child(2) {
									width: 54rpx;
									left: 28rpx;
									position: absolute;
									top: 10rpx;

								}
							}

							.con {
								position: absolute;
								width: 22rpx !important;
								top: 5rpx;
								right: 20rpx;
								z-index: 1000;
							}


						}
					}

					text {
						&:nth-child(2) {
							font-size: 24rpx;
							color: #666666;
						}
					}


				}

				.add {
					width: 110rpx;
					height: 120rpx;
					margin-left: 50rpx;
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					align-items: center;

					.pic {
						margin-top: 10rpx;
						width: 100%;
						height: 70rpx;
						display: flex;
						justify-content: center;

						image {
							&:nth-child(1) {
								width: 54rpx;


							}
						}
					}

					text {
						&:nth-child(2) {
							font-size: 20rpx;
							color: #333333;
						}
					}


				}


			}

			.full_service {
				width: 710rpx;
				margin-top: 62rpx;
				height: 32rpx;
				display: flex;
				justify-content: flex-start;
				align-items: center;
				margin-left: 20rpx;

				.left_line {
					width: 150rpx;
					height: 2rpx;
					box-sizing: border-box;
					border-bottom: 1rpx solid #F2F2F2;
					margin-left: 100rpx;
				}

				.middle_content {
					font-size: 30rpx;
					margin-left: 33rpx;
					color: #333333;
				}

				.right_line {
					width: 150rpx;
					margin-left: 33rpx;
					height: 2rpx;
					box-sizing: border-box;
					border-bottom: 1rpx solid #F2F2F2;
				}
			}

			.select_icon {
				width: 710rpx;
				margin-top: 30rpx;
				border-top-left-radius: 12rpx;
				border-top-right-radius: 12rpx;
				margin-left: 20rpx;
				display: flex;
				justify-content: flex-start;
				flex-wrap: wrap;

				.replace_icon {
					width: 110rpx;
					height: 120rpx;
					margin-left: 20rpx;
					display: flex;
					flex-direction: column;
					justify-content: flex-start;
					align-items: center;

					view {
						&:nth-child(1) {
							margin-top: 10rpx;
							width: 100%;
							height: 70rpx;
							position: relative;

							image {
								&:nth-child(1) {
									position: absolute;
									width: 0rpx;
									top: 5rpx;
									right: 20rpx;
									z-index: 100;
								}

								&:nth-child(2) {
									width: 54rpx;
									left: 28rpx;
									position: absolute;
									top: 10rpx;

								}
							}

							.con {
								position: absolute;
								width: 22rpx !important;
								top: 5rpx;
								right: 20rpx;
								z-index: 1000;
							}


						}
					}

					text {
						&:nth-child(2) {
							font-size: 24rpx;
							color: #666666;
						}
					}


				}
			}
		}
	}
</style>
